<template>
	<view class="bigBox">
		<view class="headerBox">
			<image src="../../static/images/邀请有奖图.png"></image>
			<view class="headerNBox">
				<view class="titleA">我的邀请码</view>
				<view class="titleB">（长按复制发送给好友，好友注册时填写）</view>
				<view class="btnNum" @longtap="copy(num)">{{num}}</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="title1">
				<image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%82%80%E8%AF%B7%E6%9C%89%E5%A5%96/u3953.png"></image>
				<text>奖励记录（3）</text>
			</view>
			<view class="contentArr" v-for="content in contentArr" key="content.id">
				<view class="tex">{{content.tex}}</view>
				<view class="texDate" >{{content.texDate}}</view>
			</view>
		</view>
		<BottomText></BottomText>
	</view>
	
</template>

<script lang="ts">
	import BottomText from '../../components/BottomText/BottomText.vue'
	export default {
		data() {
			return {
				num:'45269633',
				contentArr:[{
					id:1,
					tex:'您的好友【浅浅曦儿】购买幼儿英语入门课程，你获得50元优惠券奖励。',
					texDate:'2019-01-16'
				},{
					id:2,
					tex:'您的好友【深深曦儿】购买幼儿英语入门课程，你获得10元优惠券奖励。',
					texDate:'2020-07-22'
				},{
					id:3,
					tex:'您的好友【灰灰曦儿】购买幼儿英语入门课程，你获得100元优惠券奖励。',
					texDate:'2022-11-07'
				},{
					id:4,
					tex:'您的好友【白白曦儿】购买幼儿英语入门课程，你获得70元优惠券奖励。',
					texDate:'2022-05-17'
				}]
			}
		},
		methods: {
			copy(num){
						  //提示模板
						  uni.showModal({
						    content:num,//模板中提示的内容
						    confirmText:'复制邀请码',
						    success:()=>{//点击复制内容的后调函数
						      //uni.setClipboardData方法就是讲内容复制到粘贴板
						      uni.setClipboardData({
						        data:num,//要被复制的内容
						        success:()=>{//复制成功的回调函数
						          uni.showToast({//提示
						            title:'复制成功'
						          })
						        }
						      });
						    }
						  });
						},
		}
			
	}
</script>

<style lang="less" scoped>
.bigBox{
	display: flex;
	flex-direction: column;
}
.headerBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	image{
		width: 676rpx;
		height: 350rpx;
		margin-top: 50rpx;
	}
	.headerNBox{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.titleA{
			font-size: 26rpx;
			font-weight: 700;
			color: #2c2c2c;
		}
		.titleB{
			font-size: 22rpx;
			color: #929292;
			margin-top: 22rpx;
		}
		.btnNum{
			margin-top: 22rpx;
			margin-bottom: 60rpx;
			height: 80rpx;
			width: 228rpx;
			text-align: center;
			background-color: #ff6605;
			line-height: 80rpx;
			border-radius: 5px;
			color: #ffffff;
			box-shadow: 10rpx 10rpx 20rpx #ffe0d2;
		}
	}
}
.contentBox{
	margin: 0 30rpx;
	//padding-bottom: 94rpx;
	.title1{
		image{
			width: 20rpx;
			height: 42rpx;
			vertical-align: middle;
		}
		text{
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	.contentArr{
		padding: 46rpx 0;
		border-bottom: 1px solid #f9f9f9;
		display: flex;
		justify-content: space-between;
		.tex{
			font-size: 22rpx;
			color: #666666;
			width: 526rpx;
		}
		.texDate{
			font-size: 24rpx;
			color: #cccccc;
		}
	}
}

</style>
